<div id="top-panel">
    <div id="panel">
        
    </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	<?php if (isset($chart)): ?>
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
			draw_chart_all();
			<?php if( isset($chart_filter) ): ?>
        	draw_chart_filter();
        	<?php endif; ?>
      }
      
      function draw_chart_all(){
      		// Create the data table.
        	var data = new google.visualization.DataTable();
        	data.addColumn('string', 'Topping');
        	data.addColumn('number', 'Slices');
	       /* var data = google.visualization.arrayToDataTable([
	          ['Year', 'Sales', 'Expenses'],
	          ['2004',  1000,      400],
	          ['2005',  1170,      460],
	          ['2006',  660,       1120],
	          ['2007',  1030,      540]
	        ]);*/
			var data = google.visualization.arrayToDataTable(<?php echo $chart; ?>);

        // Set chart options
	        var options = {'title':'All KIOSK donate',
	                       'width':700,
	                       'height':300};

	        // Instantiate and draw our chart, passing in some options.
	        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
	        chart.draw(data, options);
      	}
      
      function draw_chart_filter(){
      		// Create the data table.
        	var data = new google.visualization.DataTable();
        	data.addColumn('string', 'Topping');
        	data.addColumn('number', 'Slices');
        	data.addColumn({type: 'string', role: 'annotation'});
	      
			var data = google.visualization.arrayToDataTable(<?php echo $chart_filter; ?>);

        // Set chart options
	        var options = {'title':'<?php echo isset($chart_filter_title) ? $chart_filter_title : ''; ?>',
	                       'width':700,
	                       'height':300,
	                       'pointSize':10	                      
	                       };

	        // Instantiate and draw our chart, passing in some options.
			<?php if(isset($chart_type)): ?>
				var chart = new google.visualization.LineChart(document.getElementById('chart_div_filter'));
	        <?php else: ?>
				var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_filter'));
			<?php endif; ?>
			chart.draw(data, options);
      }
      
	  <?php endif; ?>
	  
	var jq = jQuery.noConflict();
	jq(document).ready(function(){
		jq(function(){
			jq( "#start_date" ).datepicker({
				altField: "#alternate",
				altFormat: "DD, d MM, yy"
			});
			jq( "#end_date" ).datepicker({
				altField: "#alternate",
				altFormat: "DD, d MM, yy"
			});
		});
	});
    </script>
<div id="wrapper">
	<div id="content">
		<div>
			<?php echo validation_errors(); ?>
		</div>
		<div id="rightnow">
			<h3 class="reallynow">Statistic - <?php echo $title; ?></h3>
			<table>
				<tr>
					<td>					
						<a style="font-weight:bold;" href="<?php echo site_url('statistic'); ?>">Show all chart of kiosk</a>
					</td>
					<td>
						<?php echo form_open('statistic/device'); ?>
							<table>
							<tr>
								<td style="border:0;">Select Kiosk</td>
								<td style="border:0;">
									<select name="kid" >
										<?php foreach($kiosk as $v): ?>
											<option value="<?php echo $v['id']; ?>" <?php if(isset($device) && $device==$v['id']): ?> selected="selected" <?php endif; ?>><?php echo $v['name']; ?></option>
										<?php endforeach; ?>
									</select>
								</td>
							 </tr>
							 <tr>
								<td style="border:0;">&nbsp;</td>
								<td style="border:0;"><input type="submit" value="Get" /></td>
							</tr>
							</table>
						<?php echo form_close(); ?>
					</td>
					<td>
						<?php echo form_open('statistic/time'); ?>
						<table>
							<tr>
								<td style="border:0;">Start date:</td>
								<td style="border:0;"> <input type="text" name="start_date" id="start_date" value="<?php echo isset($start_date) ? $start_date : ''; ?>" /></td>
							</tr>
							<tr>	
								<td style="border:0;">End date:</td>
								<td style="border:0;"><input type="text" name="end_date" id="end_date" value="<?php echo isset($end_date) ? $end_date : ''; ?>" /></td>
							</tr>
							<tr>
								<td style="border:0;">Select Kiosk</td>
								<td style="border:0;">
									<select name="kid" >
										<?php foreach($kiosk as $v): ?>
											<option value="<?php echo $v['id']; ?>" <?php if(isset($device) && $device==$v['id']): ?> selected="selected" <?php endif; ?>><?php echo $v['name']; ?></option>
										<?php endforeach; ?>
									</select>
								</td>
							 </tr>
							<tr>
								<td style="border:0;">&nbsp;</td>
								<td style="border:0;"><input type="submit" value="Get" /></td>
							</tr>
						</table>						
						<?php echo form_close(); ?>
					</td>
				</tr>
			</table>
			<div style="margin-top:10px;overflow:hidden;">
				<div id="chart_div">No data</div>
			</div>
			
			<div style="margin-top:10px;overflow:hidden;">
				<div id="chart_div_filter">No data</div>
			</div>	
		</div>
	</div>
</div>